/*
 * @Author: yanjikun
 * @Date: 2022-06-02 09:47:55
 * @LastEditors: yanjikun
 * @LastEditTime: 2022-06-02 11:10:28
 * @Description: file content
 */

import { useVModel } from '@vueuse/core'
import { BasicTinymceProps } from '../basic-tinymce'
import { TinymceEmitType } from '../types/tinymce'

export type TinymceState = ReturnType<typeof useTinymceState>

export type useTinymceStateParams = {
  props: BasicTinymceProps
  emit: TinymceEmitType
}

export const useTinymceState = ({ props, emit }: useTinymceStateParams) => {
  const defaultSetting = {
    language_url: '/tinymce/langs/zh_CN.js', // 引入语言包文件
    language: 'zh_CN', // 语言类型

    skin_url: '/tinymce/skins/ui/oxide', // 皮肤：浅色
    // skin_url: '/tinymce/skins/ui/oxide-dark',//皮肤：暗色
    content_css: '/tinymce/skins/content/default/content.css',
    quickbars_selection_toolbar:
      'removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor',
    // toolbar:
    //   'undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |',
    // plugins: 'code link image media table lists fullscreen quickbars',
    plugins:
      'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern autosave quickbars', // 插件配置
    toolbar: `
      preview undo redo restoredraft | alignleft aligncenter alignright alignjustify | bullist numlist | forecolor backcolor bold italic underline strikethrough fullscreen |  \
      fontselect fontsizeselect styleselect | outdent indent indent2em lineheight | cut copy paste pastetext print |\
      table image media charmap hr pagebreak insertdatetime | code selectall searchreplace visualblocks link anchor |  blockquote subscript superscript removeformat
    `, // 工具栏配置，设为false则隐藏
    // menubar: 'file edit', // 菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”

    // toolbar_groups: {
    //   formatting: {
    //     text: '文字格式',
    //     tooltip: 'Formatting',
    //     items: 'bold italic underline | superscript subscript',
    //   },
    //   alignment: {
    //     icon: 'align-left',
    //     tooltip: 'alignment',
    //     items: 'alignleft aligncenter alignright alignjustify',
    //   },
    // },

    fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', // 字体大小
    font_formats:
      '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;', // 字体样式
    lineheight_formats: '0.5 0.8 1 1.2 1.5 1.75 2 2.5 3 4 5', // 行高配置，也可配置成"12px 14px 16px 20px"这种形式

    nonbreaking_force_tab: true,

    height: 400, // 注：引入autoresize插件时，此属性失效
    placeholder: '在这里输入文字',
    branding: true, // tiny技术支持信息是否显示
    resize: true, // 编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
    statusbar: true, // 最下方的元素路径和字数统计那一栏是否显示
    elementpath: true, // 元素路径是否显示

    toolbar_sticky: true,
    // toolbar_drawer: 'sliding',
    content_style: 'img {max-width:100%;} #tinymce {overflow-x: hidden;}', // 直接自定义可编辑区域的css样式
    // content_css: '/tinycontent.css',  //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入

    paste_data_images: true, // 图片是否可粘贴
    images_file_types: 'jpeg,jpg,png,gif,bmp,webp',
  }
  const modelValue = useVModel(props, 'value', emit)
  return { modelValue, defaultSetting }
}
